<template>
  <div id="discuss-list">
    <ul>
      <li v-for="item in list" :key="item.id">
        <hr />
        <p class="name">{{ item.name }}--{{ item.time | dataFormat }}</p>
        <div class="content-area">
          <p class="content">{{ item.content }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "ChatList",
  props: ["list"],
  methods: {},
};
</script>

<style>
#discuss-list {
  margin: 0 auto 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  height: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
  display: none;
}
#discuss-list ul {
  list-style: none;
  margin-left: 10px;
}
#discuss-list ul li {
  margin: 10px auto;
}
#discuss-list ul li:first-child hr {
  display: none;
}
#discuss-list ul li hr {
  width: 90%;
  margin-left: 0;
}
.content-area {
  border: 1px solid transparent;
  border-radius: 18px;
  width: 90%;
}
#discuss-list ul li name {
  border: 1px solid transparent;
}
.content-area .content {
  /* display: inline; */
  text-align: left;
  font-size: 20px;
  word-wrap: break-word;

  /* margin-top: 10px; */
  /* margin-left: 10px; */
}
</style>
